import React from 'react'
import {Link} from "react-router-dom"
import { observer } from "mobx-react"
import {useStore} from '../store'

function Home(props) {
  console.log('home-props:', props)
  const store = useStore()

  const delHandler = (id) => {
    store.todoStore.delTodo(id)
  }
  const changeHandler = (id) => {
    store.todoStore.changeTodoState(id)
  }
  return (
    <div>
      <h3>todo-list</h3>
      <div className='todo-add'>
        <Link to={props.match.url + '/todoadd'}>添加</Link>
      </div>

      <ul className='todo-list'>
        {
          store.todoStore.todoList.map(item => (
            <li className='todo-item' key={item.id}>
              <span className={['todo-state', item.state ? 'todo-on' : ''].join(' ')} onClick={() => changeHandler(item.id)}></span>
              <span className='todo-body'>{item.body}</span>
              <Link className='todo-edit' to={"/home/todoedit?id=" + item.id}>编辑</Link>
              <button className='todo-del' onClick={() => delHandler(item.id)}>删除</button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default observer(Home)